<template>
    <div id="app" :bk-language="$i18n.locale">
        <div class="browser-tips" v-if="showBrowserTips">
            <span class="tips-text">{{$t('您的浏览器非Chrome，建议您使用最新版本的Chrome浏览，以保证最好的体验效果')}}</span>
            <i class="tips-icon bk-icon icon-close-circle-shape" @click="showBrowserTips = false"></i>
        </div>
        <the-header></the-header>
        <router-view class="views-layout"></router-view>
        <the-permission-modal ref="permissionModal"></the-permission-modal>
        <cmdb-business-selector v-if="businessSelectorVisible" hidden
            @on-select="resolveBusinessSelectorPromise"
            @business-empty="resolveBusinessSelectorPromise">
        </cmdb-business-selector>
    </div>
</template>

<script>
    import theHeader from '@/components/layout/header'
    import thePermissionModal from '@/components/modal/permission'
    // import { execMainScrollListener, execMainResizeListener } from '@/utils/main-scroller'
    import { addResizeListener, removeResizeListener } from '@/utils/resize-events'
    import { mapGetters } from 'vuex'
    export default {
        name: 'app',
        components: {
            theHeader,
            thePermissionModal
        },
        data () {
            const showBrowserTips = window.navigator.userAgent.toLowerCase().indexOf('chrome') === -1
            return {
                showBrowserTips
                // execMainScrollListener
            }
        },
        computed: {
            ...mapGetters(['globalLoading', 'businessSelectorVisible']),
            ...mapGetters('userCustom', ['usercustom', 'firstEntryKey', 'classifyNavigationKey'])
        },
        mounted () {
            this.$store.commit('setFeatureTipsParams')
            // addResizeListener(this.$refs.mainScroller, execMainResizeListener)
            addResizeListener(this.$el, this.calculateAppHeight)
            window.permissionModal = this.$refs.permissionModal
        },
        beforeDestroy () {
            // removeResizeListener(this.$refs.mainScroller, execMainResizeListener)
            removeResizeListener(this.$el, this.calculateAppHeight)
        },
        methods: {
            resolveBusinessSelectorPromise (val) {
                this.$store.commit('resolveBusinessSelectorPromise', !!val)
            },
            calculateAppHeight () {
                this.$store.commit('setAppHeight', this.$el.offsetHeight)
            }
        }
    }
</script>
<style lang="scss" scoped>
    #app{
        height: 100%;
    }
    .browser-tips{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #ff5656;
        background-color: #f8f6db;
        z-index: 99999;
        .tips-text{
            margin: 0 20px 0 0 ;
        }
        .tips-icon{
            cursor: pointer;
        }
    }
    .views-layout{
        height: calc(100% - 58px);
    }
</style>
